<template>
  <div>
    <el-row :getter='20'>
      <el-col :span="6">
        <!-- 商品三级分类 -->
        <common-tree v-if="this.tree.data && this.tree.data.length > 0" :tree="tree"></common-tree>
      </el-col>
      <el-col :span="18">
        <!-- 属性列表 -->
        <common-table v-if="this.tree.data && this.tree.data.length > 0" :tableProperties="tableProperties">
        </common-table>
      </el-col>
    </el-row>

    <!-- 新增属性分组 -->
    <common-dialog-form :from="addAttr"></common-dialog-form>
    <!-- 修改属性分组 -->
    <common-dialog-form :from="updateAttr"></common-dialog-form>
    <!-- 关联商品属性和商品属性分组 -->
    <common-dialog-form :from="relationAttrAndAttrGroup"></common-dialog-form>
  </div>
</template>

<script>
  import CommonFormEnum from '../../../components/enum/CommonFormEnum'
  import CommonDialogForm from '../../../components/commonDialogForm'
  import CommonTableEnum from "../../../components/enum/CommonTableEnum"
  import CommonTable from '../../../components/commonTable'
  import CommonTree from '../../../components/commonTree/index.vue'
  import {
    errorMessage,
    successMessage,
    successMessageBox
  } from '../../../utils/Message.js'
  import BaseVue from '../../../components/BaseVue.vue'
  export default {
    name: 'pecificatisons',
    extends: BaseVue,
    components: {
      CommonTree,
      CommonTable,
      CommonDialogForm
    },
    data() {
      return {
        // 单击树选择的节点
        selectNodeData: null,
        // 商品三级分类
        tree: {
          treeProps: {
            label: 'name',
            children: 'children'
          },
          data: [],
          buttons: [],
          nodeClick: (node, data) => {
            this.selectNodeData = data
            this.tableProperties.tableView.refresh++
          }
        },
        // 新增属性分组
        addAttr: {
          show: false,
          from: {
            originalData: {
              attrName: null,
              searchType: 0,
              icon: null,
              valueSelect: null,
              attrType: 0,
              enable: 1,
              catelogId: null,
              showDesc: 1,
            },
            title: '新增属性分组',
            columns: [{
                label: '属性名',
                prop: 'attrName',
                type: CommonFormEnum.INPUT,
                required: true,
                labelWidth: '120px'
              },
              {
                label: '是否需要检索',
                prop: 'searchType',
                type: CommonFormEnum.SELECT,
                required: true,
                options: [{
                    label: '需要',
                    value: 1
                  },
                  {
                    label: '不需要',
                    value: 0
                  },
                ],
                labelWidth: '120px'
              },
              {
                label: '可选值列表',
                prop: 'valueSelect',
                type: CommonFormEnum.INPUT,
                required: false,
                labelWidth: '120px'
              },
              {
                label: '属性类型',
                prop: 'attrType',
                type: CommonFormEnum.SELECT,
                required: true,
                options: [{
                    label: '销售属性',
                    value: 0
                  },
                  {
                    label: '基本属性',
                    value: 1
                  },
                  {
                    label: '既是销售属性又是基本属性',
                    value: 2
                  },
                ],
                labelWidth: '120px'
              },
              {
                label: '启用状态',
                prop: 'enable',
                type: CommonFormEnum.SELECT,
                required: true,
                options: [{
                    label: '禁用',
                    value: 0
                  },
                  {
                    label: '启用',
                    value: 1
                  },
                ],
                labelWidth: '120px'
              },
              {
                label: '快速展示',
                prop: 'showDesc',
                type: CommonFormEnum.SELECT,
                required: true,
                options: [{
                    label: '否',
                    value: 0
                  },
                  {
                    label: '是',
                    value: 1
                  },
                ],
                labelWidth: '120px'
              },
              {
                label: '组图标',
                prop: 'icon',
                type: CommonFormEnum.SingleUpload,
                required: true,
                labelWidth: '120px'
              },
            ],
            footBut: [{
              api: this.addAttrEvent,
              text: '添加'
            }],
          }
        },
        // 修改商品属性
        updateAttr: {
          show: false,
          from: {
            originalData: {
              attrName: null,
              searchType: null,
              icon: null,
              valueSelect: null,
              attrType: null,
              enable: null,
              catelogId: null,
              showDesc: null,
            },
            title: '修改属性分组',
            columns: [{
                label: '属性名',
                prop: 'attrName',
                type: CommonFormEnum.INPUT,
                required: true,
                labelWidth: '120px'
              },
              {
                label: '是否需要检索',
                prop: 'searchType',
                type: CommonFormEnum.SELECT,
                required: true,
                options: [{
                    label: '需要',
                    value: 1
                  },
                  {
                    label: '不需要',
                    value: 0
                  },
                ],
                labelWidth: '120px'
              },
              {
                label: '可选值列表',
                prop: 'valueSelect',
                type: CommonFormEnum.INPUT,
                required: false,
                labelWidth: '120px'
              },
              {
                label: '属性类型',
                prop: 'attrType',
                type: CommonFormEnum.SELECT,
                required: true,
                options: [{
                    label: '销售属性',
                    value: 0
                  },
                  {
                    label: '基本属性',
                    value: 1
                  },
                  {
                    label: '既是销售属性又是基本属性',
                    value: 2
                  },
                ],
                labelWidth: '120px'
              },
              {
                label: '启用状态',
                prop: 'enable',
                type: CommonFormEnum.SELECT,
                required: true,
                options: [{
                    label: '禁用',
                    value: 0
                  },
                  {
                    label: '启用',
                    value: 1
                  },
                ],
                labelWidth: '120px'
              },
              {
                label: '快速展示',
                prop: 'showDesc',
                type: CommonFormEnum.SELECT,
                required: true,
                options: [{
                    label: '否',
                    value: 0
                  },
                  {
                    label: '是',
                    value: 1
                  },
                ],
                labelWidth: '120px'
              },
              {
                label: '组图标',
                prop: 'icon',
                type: CommonFormEnum.SingleUpload,
                required: true,
                labelWidth: '120px'
              },
            ],
            footBut: [{
              api: this.updateAttrEvent,
              text: '确定'
            }],
          }
        },
        /* 关联商品分类和品牌 */
        relationAttrAndAttrGroup: {
          show: false,
          from: {
            originalData: {
              attrId: null,
              attrGroupId: null,
              attrSort: null,
              attr: null
            },
            title: '关联商品分类和品牌',
            columns: [{
                label: '品牌名',
                prop: 'attr',
                options: [],
                type: CommonFormEnum.Cascader,
                required: true,
                labelWidth: '120px'
              },
              {
                label: '排序',
                prop: 'attrSort',
                type: CommonFormEnum.INPUT,
                required: true,
                labelWidth: '120px'
              },
            ],
            footBut: [{
              api: this.relationAttrAndAttrGroupEvent,
              text: '确 定'
            }],
          }
        },
        // 属性列表table
        tableProperties: {
          tabs: {
            defaultActiveName: 0,
            tabPane: [{
              label: '商品属性',
              prop: null
            }, ]
          },
          headBut: [{
            label: '新增商品属性',
            click: () => {
              this.addAttr.show = true
            }
          }],
          tableView: {
            refresh: 0,
            isPaging: true,
            api: 'product/productattr/list',
            otherApiParam: {
              catelogId: null
            },
            columns: [{
                label: '组名',
                type: CommonTableEnum.TEXT,
                prop: 'attrName',
              },
              {
                label: '是否需要检索',
                type: CommonTableEnum.TEXT,
                prop: 'searchType',
                formatter: function(v) {
              return v ? "需要" : "不需要";
              }
              },
              {
                label: '可选值列表',
                type: CommonTableEnum.TEXT,
                prop: 'valueSelect',

              },
              {
                label: '属性类型',
                type: CommonTableEnum.TEXT,
                prop: 'attrType',
                  formatter: function(v) {
              return v==0 ? "销售属性" : v==1 ? "基本属性":"既是销售属性又是基本属性";
              }                
              },
              {
                label: '启用状态',
                type: CommonTableEnum.TEXT,
                prop: 'enable',
                 formatter: function(v) {
              return v ? "启用" : "禁用";
              }
              },
              {
                label: '快速展示',
                type: CommonTableEnum.TEXT,
                prop: 'showDesc',
                  formatter: function(v) {
              return v ? "是" : "否";
              }
              },
              {
                label: '组图标',
                type: CommonTableEnum.IMAGE,
                prop: 'icon',
              },
            ],
            footBut: [{
                label: '关联属性分组',
                icon: 'el-icon-share',
                click: (row, index) => {
                  this.relationAttrAndAttrGroup.from.originalData.attrId = row.attrId
                  this.selectAttrGroup()
                }
              },
              {
                label: '修改',
                icon: 'el-icon-plus',
                click: (row, index) => {
                  this.updateAttr.from.originalData = row
                  this.updateAttr.show = true
                }
              },
              {
                label: '删除',
                icon: 'el-icon-delete',
                click: (row, index) => {
                  this.delAttrEvent(row)
                }
              },
            ],
            beforeRequest: (data) => {
              data.catelogId = this.tree.data[0].catId
              if (this.selectNodeData) data.catelogId = this.selectNodeData.catId
              return data
            },
          },
        }
      }
    },
    created() {
      this.init()
    },
    methods: {

      /* 初始化商品三级分类 */
      init() {
        return new Promise((resolve, reject) => {
          this.$http({
            url: this.$http.getRequest('product/productcategory/classification'),
            method: 'get',
            params: this.$http.adornParams()
          }).then((data) => {
            this.tree.data = data.data.data
            if (this.tree.data && this.tree.data.length > 0)
              this.selectNodeData = this.tree.data[0]
          })
        })
      },

      // 添加商品属性
      addAttrEvent(data) {
        if (!this.selectNodeData) return errorMessage("请先选择商品分类")
        data.catelogId = this.selectNodeData.catId
        return new Promise((resolve, reject) => {
          this.$http({
            url: this.$http.getRequest('product/productattr/save'),
            method: 'post',
            data: this.$http.adornData(data, false)
          }).then((data) => {
            successMessage("添加商品属性成功");
            this.addAttr.show = false
            this.tableProperties.tableView.refresh++
          }).catch(error => {
            errorMessage("添加商品属性失败")
          })
        })
      },

      // 修改商品属性
      updateAttrEvent(data) {
        return new Promise((resolve, reject) => {
          this.$http({
            url: this.$http.getRequest('product/productattr/update'),
            method: 'post',
            data: this.$http.adornData(data, false)
          }).then((data) => {
            successMessage("修改商品属性成功");
            this.updateAttr.show = false
            this.tableProperties.tableView.refresh++
          }).catch(error => {
            errorMessage("修改商品属性失败")
          })
        })
      },

      // 查询属性组
      selectAttrGroup() {
        return new Promise((resolve, reject) => {
          this.$http({
            url: this.$http.getRequest('product/productattrgroup/list'),
            method: 'get',
            params: this.$http.adornParams()
          }).then((data) => {
            let resource = data.data.data
            if (resource) {
              let props = {
                label: 'attrGroupName',
                value: 'attrGroupId'
              }
              this.relationAttrAndAttrGroup.from.columns[0].options = this.startRecursionTreeData(resource,
                props)
              this.relationAttrAndAttrGroup.show = true
            }
          })
        })
      },

      // 关联属性和属性组
      relationAttrAndAttrGroupEvent(data) {
        let obj = {
          attrId:data.attrId,
          attrGroupId:data.attr[data.attr.length-1],
          attrSort:data.attrSort,
        }
        return new Promise((resolve, reject) => {
          this.$http({
            url: this.$http.getRequest('product/productattrrelation/save'),
            method: 'post',
            data: this.$http.adornData(obj, false)
          }).then((data) => {
            successMessage("关联属性和属性组成功");
            this.relationAttrAndAttrGroup.show = false
            this.tableProperties.tableView.refresh++
          }).catch(error => {
            errorMessage("关联属性和属性组失败")
          })
        })
      },

      // 删除属性
      delAttrEvent(data){
        successMessageBox({
          content: '确定要删除吗？'
        }).then(res => {
          return new Promise((resolve, reject) => {
            this.$http({
              url: this.$http.getRequest('product/productattr/delete'),
              method: 'post',
              data: this.$http.adornData(data.attrId, false)
            }).then((data) => {
              successMessage("删除属性成功");
              this.tableProperties.tableView.refresh++
            }).catch(error => {
              errorMessage("删除属性失败")
            })
          })
        })
      }
    }
  }
</script>

<style scoped>

</style>
